<template>
  <div class="indexcontent">

    <pageHeader ref="header" :showRoof="false" :isRegPage="true"></pageHeader>
    <div class="section" style="position: relative;">
      <div class="section-main regsectionmain">
        <div class="reg-modal" v-if="regModalShow">
          <div class="reg-overlay" @click="closeRegModal"></div>
          <div class="clearfix reg-mcontent">
            <router-link :to="{name:'Optionforpersonal'}" class="reg-miytem"><img src="@/assets/images/reg-icon1.png" alt="">我是个人</router-link>
            <router-link :to="{name:'Optionforenterprise'}" class="reg-miytem" style="margin-left: 35px;"><img src="@/assets/images/reg-icon2.png"
                                                                                                               alt="">我是企业
            </router-link>
          </div>
        </div>
        <div class="reg-hd">注册瀚华云链账号</div>
        <div class="reg-bd">
          <div class="loginpage-inpgroup">
            <img src="@/assets/images/login-icon1.png" alt="" class="inpicon">
            <input type="text" placeholder="手机号/用户名">
            <div class="reg-err"><img src="@/assets/images/erricon.png" alt="">{{phoneErr}}</div>
          </div>
          <div class="loginpage-inpgroup">
            <img src="@/assets/images/login-icon2.png" alt="" class="inpicon">
            <input type="text" placeholder="设置6-18位登录密码">
            <div class="reg-err"><img src="@/assets/images/erricon.png" alt="">{{passwordErr}}</div>
          </div>
          <div class="loginpage-inpgroup">
            <img src="@/assets/images/login-icon3.png" alt="" class="inpicon"
                 style="width: 26px;margin-top: -13px;">
            <input type="text" placeholder="短信验证码">
            <button type="button" class="getcode" :class="[readyget?'ungetcode':'']" @click="tapGetCode">
              {{codeWords}}
            </button>
            <div class="reg-errcode"><img src="@/assets/images/login-icon4.png" alt="">已发送，请查收手机短信</div>
            <div class="reg-err"><img src="@/assets/images/erricon.png" alt="">{{codeErr}}</div>
          </div>
        </div>
        <div class="reg-af">
          <button type="button" class="reg-btn" @click="tapToSelect">立即注册</button>
        </div>
        <div class="reg-ft">
          <img src="@/assets/images/login-icon4.png" alt="">注册账号即表示您已阅读并同意<span @click="showUserAgreement">用户协议</span>和<span
                @click="showPrivacyprotocol">隐私政策</span>
        </div>
      </div>
    </div>
    <pageFooter/>
    <div class="self-modal" v-if="userAgreement">
      <div class="selfmodla-overlay" @click="hideselfmodal"></div>
      <div class="selfmodla-main">
        <div class="selfmodal-tl">注册协议</div>
        <div class="selfmodal-bd">
          协议内容
        </div>
        <div class="selfmodal-ft"></div>
      </div>
    </div>
    <div class="self-modal" v-if="privacyprotocol">
      <div class="selfmodla-overlay" @click="hideselfmodal"></div>
      <div class="selfmodla-main">
        <div class="selfmodal-tl">隐私政策</div>
        <div class="selfmodal-bd">
          协议内容
        </div>
        <div class="selfmodal-ft"></div>
      </div>
    </div>

  </div>
</template>

<script>
    import pageHeader from '@/components/pageHeader'
    import pageFooter from '@/components/pageFooter'

    let timeInterval = null;

    export default {
        name: 'register',
        components: {
            pageHeader,
            pageFooter
        },
        data() {
            return {
                phoneErr: '请输入手机号',
                passwordErr: '请输入密码',
                codeErr: '验证码错误',
                readyget: false,
                codeWords: '获取验证码',
                time: 10,
                regModalShow: false,
                userAgreement: false,
                privacyprotocol: false
            }
        },
        created() {

        },
        computed: {},

        mounted() {

        },
        beforeDestroy(){
            clearInterval(timeInterval)
        },
        methods: {
            tapGetCode() {
                if (!this.readyget) {
                    timeInterval = setInterval(() => {
                        if (this.time > 0) {
                            this.readyget = true;
                            this.time = this.time - 1;
                            this.codeWords = this.time + '秒后可重发'
                            console.log(this.time)
                        } else {
                            clearInterval(timeInterval)
                            this.time = 10;
                            this.codeWords = '获取验证码'
                            this.readyget = false;
                        }
                    }, 1000)
                }
            },
            tapToSelect(){
                this.regModalShow = true;
            },
            closeRegModal() {
                this.regModalShow = false;
            },
            showUserAgreement(){
                this.userAgreement = true
            },
            showPrivacyprotocol(){
                this.privacyprotocol = true
            },
            hideselfmodal(){
                this.privacyprotocol = false
                this.userAgreement = false
            }
        }
    }
</script>

<style scoped>

</style>
